import axios from 'axios';
import React, { Component } from 'react'
import store from './store/index'

import * as types from './store/types.js'

export default class App extends Component {

  componentDidMount(){
      axios('http://121.89.205.189:3000/api/banner/list').then(res => {
        // console.log(res.data.data);
        store.dispatch({type: 'change_banner_list', payload: res.data.data})
      })
      axios('http://121.89.205.189:3000/api/pro/list').then(res => {
        // console.log(res.data.data);
        store.dispatch({type: 'change_pro_list', payload: res.data.data})

      })
  }

  render() {
    console.log(store.getState());
    return (
      <div>
        <h1>App --- {store.getState().app.count}</h1>
        <button onClick={()=>{
          store.dispatch({type: types.ADD, payload: ''})
        }}>加1</button>
        <button onClick={()=>{
          store.dispatch({type: types.REDUCE, payload: ''})
        }}>减1</button>
        <button onClick={()=>{
          store.dispatch({type: types.ADDNUM, payload: 10})
        }}>加指定数</button>
        <button onClick={()=>{
          store.dispatch({type: types.REDUCENUM, payload: 5})
        }}>减指定数</button>


        <hr />
        <hr />
        <hr />

        {
          store.getState().pro.bannerList.length &&
          store.getState().pro.bannerList.map(item => {
            return (<img src={item.img} style={{height: 100}} key={item.bannerid} />)
          })
        }

{
          store.getState().pro.proList.length &&
          store.getState().pro.proList.map(item => {
            return (<p  key={item.proid}>{item.proname}</p>)
          })
        }

      </div>
    )
  }
}
